<template>
  <view class="container">
    <view class="items">
      <view v-for="(item, i) in records" :key="i" class="item">
        <view class="item-head">
          <view class="item-sn">兑换编号: {{ item.orderSn }}</view>
          <view class="item-money">消耗积分: {{ item.integral }}</view>
        </view>
        <view class="item-content">
          <view class="goods-info">
            <image class="goods-cover" :src="item.image"></image>
            <view class="goods-name">{{ item.integralGoodsName }}</view>
          </view>
          
        </view>
        <view class="item-foot">
          <view class="item-time">兑换时间: {{ item.createTime }}</view>
          <view class="item-express">{{ item.deliveryStatus }}</view>
        </view>
        <view v-if="item.deliveryStatus === '已发货'" class="item-foot">
          <view v-if="item.deliveryTime" class="item-time">发货时间: {{ item.deliveryTime }}</view>
          <view v-if="item.expressNumber" class="item-express">发货单号: {{ item.expressNumber }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        records: [],
        isEnd: false,
        page: 1,
      }
    },
    computed: {
      ...mapGetters(['memberId'])
    },
    onLoad() {
      this.getRecord()
    },
    onReachBottom() {
      this.onNextPage()
    },
    methods: {
      initRecord() {
        this.page = 1
        this.records = []
        this.getRecord()
      },
      onNextPage() {
        if (this.isEnd != 1) {
          this.page ++
          this.getRecord()
        }
      },
      getRecord() {
        this.$http({
          url: '/member/getMyIntegralOrderList',
          data: {
            page: this.page,
          }
        }).then(res => {
          this.records = this.records.concat(res.data.integralOrderList)
          this.isEnd = res.data.isEnd
        })
      },
      
      onViewShop(item) {
        uni.navigateTo({
          url: `../goods/detail?id=${item.goodsId}`
        })
      },
     
      onToTabbar2() {
        wx.switchTab({
          url: '../goods/index'
        })
      },
    },
  }
</script>

<style lang="less">
  .container {
    padding: 20rpx;
    background-color: #f2f2f2;
    min-height: 100vh;
    .items{
      padding: 20rpx 0;
    }
    .item{
      border-radius: 10rpx;
      background: #fff;
      padding: 0 20rpx;
      margin-bottom: 20rpx;
      .item-head{
        display: flex;
        justify-content: space-between;
        font-size: 32rpx;
        margin-bottom: 10rpx;
        border-bottom: 1px solid #e8e8e8;
        padding: 16rpx 0;
      }
      .item-sn{
      }
      .item-money{
        
      }
      
      .item-content{
        font-size: 26rpx;
        padding: 20rpx 0;
        .content{
          width: 100%;
        }
        .shows{
          height: 50rpx;
        }
        .showmore{
          color: #096dd9;
          float: right;
          padding: 10rpx;
          &.hide{
            transform: rotate(180deg);
          }
          .icon{
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
      .goods-info{
        display: flex;
        align-items: center;
      }
      .goods-cover{
        display: block;
        width: 100rpx;
        height: 100rpx;
      }
      .goods-name{
        margin-left: 30rpx;
      }
      .item-foot{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #e8e8e8;
      }
      .item-time{
        height: 80rpx;
        line-height: 80rpx;
        text-align: right;
      }
    }
  }
</style>
